Component({
    /**
     * 组件的属性列表
     */
    properties: {
        imgSrc: {
            type: String,
        },
        /**
         * 裁剪框高度
         */
        height: {
            type: Number,
            value: 200,
        },
        /**
         * 裁剪框宽度
         */
        width: {
            type: Number,
            value: 200,
        },
        cut_top: {
            type: Number,
            value: null,
        },
        cut_left: {
            type: Number,
            value: null,
        },
        /**
         * 图片宽度
         */
        img_width: {
            type: Number,
            value: null,
        },
        /**
         * 图片高度
         */
        img_height: {
            type: Number,
            value: null,
        },
        /**
         * 生成的图片尺寸相对剪裁框的比例
         */
        export_scale: {
            type: Number,
            value: 3,
        },
        /**
         * 是否禁用旋转
         */
        disable_rotate: {
            type: Boolean,
            value: false,
        },
        /**
         * 是否限制移动范围(裁剪框只能在图片内)
         */
        limit_move: {
            type: Boolean,
            value: false,
        },
        cut_top: {
            type: Number,
            value: null,
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        info: wx.getSystemInfoSync(),
        MOVE_THROTTLE: null, // 触摸移动节流 settimeout
        MOVE_THROTTLE_FLAG: true, // 节流标识
        TIME_BG: null, // 背景变暗延时函数
        TIME_CUT_CENTER: null,

        _touch_img_relative: [{
            x: 0,
            y: 0,
        }, ],
        _flag_bright: true, //背景是否亮
        _cut_animation: false, //是否开启图片和裁剪框过渡
        INIT_IMGWIDTH: 0,
        INIT_IMGHEIGHT: 0,
        _flag_bright: true, //背景是否亮
        _cut_animation: false, //是否开启图片和裁剪框过渡
        _flag_img_endtouch: false, // 是否结束触摸
        _img_top: wx.getSystemInfoSync().windowHeight / 2, // 图片上边距
        _img_left: wx.getSystemInfoSync().windowWidth / 2, // 图片左边距
        watch: {
            width(value, that) {
                console.log("数据变化了");
            },
        },
    },

    attached() {
        this.data.info = wx.getSystemInfoSync();
        console.log(this.data.info.windowHeight);
        console.log(this.data.info.windowWidth);

        // 启用数据监听
        this._watcher();
        this.data.INIT_IMGWIDTH = this.data.img_width;
        this.data.INIT_IMGHEIGHT = this.data.img_height;
        this.setData({
            _canvas_height: this.data.height,
            _canvas_width: this.data.width,
        });
        this._initCanvas();

        //设置裁剪框大小>设置图片尺寸>绘制canvas
        this._computeCutSize();
    },
    /**
     * 组件的方法列表
     */
    methods: {
        // 改变截取框大小
        _computeCutSize() {
            console.log(
                this.data.width,
                this.data.info.windowWidth,
                this.data.cut_left
            );
            if (this.data.width > this.data.info.windowWidth) {
                this.setData({
                    width: this.data.info.windowWidth,
                });
            } else if (
                this.data.width + this.data.cut_left >
                this.data.info.windowWidth
            ) {
                this.setData({
                    cut_left: this.data.info.windowWidth - this.data.cut_left,
                });
            }
        },

        // 渲染
        _draw(callback) {
            if (!this.data.imgSrc) return;
            let draw = () => {
                // 图片实际大小
            };
        },

        imgReset() {
            this.setData({
                scale: 1,
                angle: 0,
                _img_top: wx.getSystemInfoSync().windowWidth / 2,
                _img_left: wx.getSystemInfoSync().windowWidth / 2,
            });
        },

        _watcher() {
            Object.keys(this.data).forEach((v) => {
                this._observe(this.data, v, this.data.watch[v]);
            });
        },

        _observe(obj, key, watchFun) {
            var val = obj[key];
            Object.defineProperty(obj, key, {
                configurable: true,
                enumerable: true,
                set: (value) => {
                    val = value;
                    watchFun && watchFun(val, this);
                },

                get() {
                    if (
                        val &&
                        "_img_top|img_left||width|height|min_width|max_width|min_height|max_height|export_scale|cut_top|cut_left|canvas_top|canvas_left|img_width|img_height|scale|angle|min_scale|max_scale".indexOf(
                            key
                        ) != -1
                    ) {
                        let ret = parseFloat(parseFloat(val).toFixed(3));
                        if (typeof val == "string" && val.indexOf("%") != -1) {
                            ret += "%";
                        }
                        return ret;
                    }
                    return val;
                },
            });
        },

        _initCanvas() {
            //初始化canvas
            if (!this.data.ctx) {
                this.data.ctx = wx.createCanvasContext("image-cropper", this);
            }
        },

        _start(event) {
            this.data._flag_img_endtouch = false;
            if (event.touches.length == 1) {
                // 单指拖动
                this.data._touch_img_relative[0] = {
                    x: event.touches[0].clientX - this.data._img_left,
                    y: event.touches[0].clientY - this.data._img_top,
                };
            }
            console.log(this.data._touch_img_relative);
        },
        _move_throttle() {
            //安卓需要节流
            if (this.data.info.platform == "android") {
                clearTimeout(this.data.MOVE_THROTTLE);
                this.data.MOVE_THROTTLE = setTimeout(() => {
                    this.data.MOVE_THROTTLE_FLAG = true;
                }, 1000 / 40);
                return this.data.MOVE_THROTTLE_FLAG;
            } else {
                this.data.MOVE_THROTTLE_FLAG = true;
            }
        },
        _move(event) {
            if (this.data._flag_img_endtouch || !this.data.MOVE_THROTTLE_FLAG) return;
            console.log(event);

            this.data.MOVE_THROTTLE_FLAG = false;
            this._move_throttle();
            this._moveDuring();
            if (event.touches.length == 1) {
                // 单指拖动
                let left =
                    event.touches[0].clientX - this.data._touch_img_relative[0].x,
                    top = event.touches[0].clientY - this.data._touch_img_relative[0].y;
                console.log(left, top);
            }
        },
        // 移动中
        _moveDuring() {
            // 清空之前的自动居中延迟函数
            clearTimeout(this.data.TIME_CUT_CENTER);
            // 清空之前的背景变化延迟函数
            clearTimeout(this.data.TIME_BG);
            // 高亮背景
            if (!this.data._flag_bright) {
                this.setData({
                    _flag_bright: true,
                });
            }
        },
    },
});